<template>
<div>
  <navs></navs>
  <div class="search_box2">
    <!-- 版心 -->
    <div class="search_bx3">
      <!-- 头部导航部分 -->
      <div class="search_bx3_top">
        <div class="bx3_top_d1" @click="ck()">
          筛选<span class="sp1 iconfont icon-filter"></span>
        </div>
        <div class="bx3_top_d2">
          以下搜索为“<span class="sp2">{{ $store.state.inputVal }}</span
          >”的结果
        </div>
      </div>
      <!-- 主体 -->
      <div class="bx3_content">
        <div class="search_left" ref="isShows">
          <div
            class="search_left_top"
            v-for="(item, index) in search_lists"
            :key="index"
          >
            <div class="left-top_d1" @click="wu(index)">
              <span class="search_texts">{{ item.name}}</span>
              <span ref="fan" class="bj"
                ><img :src="item.img" alt=""
              /></span>
            </div>
             <div class="left-top_d2" ref="offOn">
              <div class="fl"><router-link to="/index">男士</router-link></div>
              <div class="fl"><router-link to="/index">女士</router-link></div>
            </div>
          </div>
        </div>
        <ul class="search_right">
          <li class="search_list" v-for="(item, index) in list" :key="index">
            <div class="search_new">
              <span>{{ item.top }}</span>
            </div>
            <div class="search_picture">
              <router-link to="/details"
                ><img :src="item.img" alt="" class="xie"
              /></router-link>
            </div>
            <p class="search_xi">{{ item.logo }}</p>
            <p class="search_price">
              <span>￥{{ item.price }}</span>
              <span class="wu">￥{{ item.price2 }}</span>
            </p>
            <div class="search_text">
              <p class="search_text2">{{ item.text }}</p>
              <div class="search_none">
                <router-link to=""><img :src="item.img" alt="" class="xie2"/></router-link>
              </div>
            </div>
            <div class="search_bottom">
              <button>
                <router-link to="/search/quicktour">{{ item.text2 }}</router-link>
              </button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <footers></footers>
  <router-view></router-view>
</div>

</template>

<script setup>
import navs from '../components/Nav.vue'
import footers from '../components/Footer.vue'
import { ref, reactive } from "vue";
import { useStore } from "vuex";
const $store = useStore();
const list = reactive([
  {
    top: "NEW",
    img: "/public/images/list-search-cart/xie.jpg",
    logo: "AIBU男子高尔夫S3系列",
    price: 1989,
    price2: 2599,
    text: "一种颜色",
    text2: "快速浏览",
  },
  {
    top: "NEW",
    img: "/public/images/list-search-cart/xie.jpg",
    logo: "AIBU男子高尔夫S3系列",
    price: 2989,
    price2: 2599,
    text: "一种颜色",
    text2: "快速浏览",
  },
  {
    top: "NEW",
    img: "/public/images/list-search-cart/xie.jpg",
    logo: "AIBU男子高尔夫S3系列",
    price: 2989,
    price2: 2599,
    text: "一种颜色",
    text2: "快速浏览",
  },
  {
    top: "NEW",
    img: "/public/images/list-search-cart/xie.jpg",
    logo: "AIBU男子高尔夫S3系列",
    price: 2989,
    price2: 2599,
    text: "一种颜色",
    text2: "快速浏览",
  },
]);
//点击筛选隐藏
let kai = ref(false);
let isShows = ref(null);
function ck() {
  kai.value = !kai.value;
  if (kai.value) {
    isShows.value.style.width = "440px";
    isShows.value.style.transition = "all 0.2s linear";
  } else {
    isShows.value.style.width = "0px";
    isShows.value.style.transition = "all 0.2s linear";
  }
}
//下拉列表显示隐藏
let off = ref(false);
let fan = ref(null);
let offOn = ref(null);
let piGe = ref(null);
function wu(index) {
  off.value = !off.value;
  console.log(fan.value);
  if (off.value) {
    fan.value[index].style.transform = "rotate(0)";
    fan.value[index].style.transition = "all 0.1s linear";
  } else {
    fan.value[index].style.transform = "rotate(180deg)";
    fan.value[index].style.transition = "all 0.1s linear";
  }
  if (off.value) {
    offOn.value[index].style.height = "60px";
    offOn.value[index].style.transition = "all 0.2s linear";
  } else {
    offOn.value[index].style.height = "0px";
    offOn.value[index].style.transition = "all 0.2s linear";
  }
}
// 遍历下拉列表
const search_lists = reactive([
  {
    name: "分类",
    img: "../../public/images/list-search-cart/jt.png",
    lists: ["男士", "女士"],
  },
  {
    name: "皮革",
    img: "../../public/images/list-search-cart/jt.png",
    lists: ["老人", "小孩"],
  }
]);
</script>

<style lang="less" scoped>
@import url("../../public/font/font_icon.css");
* {
  margin: 0;
  padding: 0;
}
.search_box2 {
  width: 100%;
  margin:6rem 0;
  .search_bx3 {
    margin: 0 auto;
    width: 75%;
    .search_bx3_top {
      margin: 30px auto 30px;
      display: flex;
      justify-content: space-between;

      .bx3_top_d1 {
        width: 140px;
        font-weight: bold;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        position: relative;
        border: 1px solid black;
        transition: all 0.3s linear;
        cursor: pointer;
        .sp1 {
          position: absolute;
          left: 16px;
        }
      }
      .bx3_top_d1:hover {
        background: #8a041f;
        color: white;
      }
      .bx3_top_d2 {
        width: 45%;
        line-height: 40px;
        font-size: 30px;
        text-align: center;
        margin-right: 360px;
        color: #616265;
        .sp2 {
          color: black;
        }
      }
      .bx3_top_d3 {
        position: relative;
        text-align: center;
        width: 80px;
        line-height: 40px;
        cursor: pointer;
        .yin {
          position: absolute;
        }
      }
    }
    .bx3_content {
      display: flex;
      .search_left {
        overflow: hidden;
        white-space: nowrap;
        width: 0px;
        border-top: 1px solid #ebeef5;
        border-bottom: 1px solid #ebeef5;
        .search_left_top {
          border-bottom: 1px solid #ccc;
          padding-bottom: 10px;
          .left-top_d1 {
            display: flex;
            font-size: 20px;
            font-weight: 600;
            cursor: pointer;
            justify-content: space-between;
            .bj {
              transform: rotate(180deg);
            }
          }
          .left-top_d2 {
            height: 0;
            overflow: hidden;
          }
        }
      }
      .search_right {
        list-style: none;
        display: flex;
        margin-left: 20px;
        .search_list {
          width: 25%;
          padding: 30px 30px 20px;
          margin: 20px 0;
          background-color: white;
          transition: all 0.3s ease-in-out;
          .search_new {
            position: relative;
            span {
              font-size: 20px;
              position: absolute;
            }
            &:before {
              content: "";
              width: 50px;
              height: 50px;
              left: -18px;
              top: -5px;
            }
            &:before {
              background: #e9e4ea;
              position: absolute;
              z-index: 0;
            }
          }
          .search_picture {
            a {
              .xie {
                width: 100%;
              }
            }
          }
          .search_xi {
            text-align: center;
            font-size: 16px;
            margin-bottom: 8px;
          }
          .search_price {
            text-align: center;
            font-size: 15px;
            color: #000;
            .wu {
              text-decoration: line-through;
              color: #999;
            }
          }
          .search_text {
            text-align: center;
            padding-top: 10px;
            font-size: 12px;
            color: #616265;
            .search_text2 {
              transition: all 0.5s ease-in-out;
            }
            .search_none {
              height: 20px;
              opacity: 0;
              transition: all 0.5s ease-in-out;
              a {
                .xie2 {
                  position: relative;
                  width: 20px;
                }
              }
            }
          }
          .search_bottom {
            text-align: center;
            margin-top: 22px;
            button {
              cursor: pointer;
              height: 44px;
              border: 2px solid #616265;
              line-height: 40px;
              padding: 0;
              font-size: 16px;
              color: #616265;
              padding: 0 42px;
              border-radius: 0;
              transform: scale(1);
              transition-duration: 0.3s;
              transition-timing-function: ease-out;
              opacity: 0;
            }
            button:hover {
              background-color: #000;
              color: white;
              transform: scale(1);
              transition-duration: 0.3s;
              transition-timing-function: ease-out;
            }
            button:hover a {
              color: white;
            }
          }
        }
        .search_list:hover {
          z-index: 5;
          box-shadow: 0px 5px 39px #ccc;
        }
        .search_list:hover .search_text2 {
          opacity: 0;
        }
        .search_list:hover .search_none {
          opacity: 1;
        }
        .search_list:hover .search_bottom > button {
          opacity: 1;
        }
      }
    }
  }
}
</style>
